<template>
    <div class="ff-walk">
        <more-screen @selection-code="selection"></more-screen>
        <div class="ff-walk--style-list">
            <ul>
                <li
                    v-for="(list, index) of classList"
                    :key="index"
                    :class="{'ff-walk--style-list-active': activeClass === index}"
                    @click="changeActiveClass(index)"
                >{{list.label}}</li>
            </ul>
            <span class="ff-walk--style-top-tip">{{classListTip}}</span>
        </div>
        <ul id="ff-walk--lists">
            <li v-for="(list, index) of lists" :key="`${list.code}-${index}`" class="ff-walk-class-box" :ref="list.code" v-loading="loading">
                <list
                    :hide="false"
                    :get-data="list.getWalkData"
                    :title="list.title"
                    :refresh.sync="list.refresh"
                    paginationLocation="top"
                    nodatatext="无该大类搜索款"
                ></list>
            </li>
        </ul>
        <confirm-dialog
            :visible.sync="walkOpenTip.visible"
            :title="walkOpenTip.title"
            :content="walkOpenTip.content"
            cancel-name="我知道了"
            confirm-name="下次不在提醒"
            confirm-class="ff-walk-open-tip-button"
            @confirm="walkOpenTipConfirm"
            class="ff-walk-open-tip"
        ></confirm-dialog>
        <div class="ff-walk-class--nav">
            <div class="ff-walk-class--nav-title">大类导航</div>
            <ul>
                <li v-for="(list, index) of navs" :key="index" @click="scrollClass(list)">
                    <el-popover
                        placement="right"
                        trigger="hover"
                    >
                        <div slot="reference" class="ff-walk-class--nav-label" :class="activeCode === list.code? 'ff-walk-class--nav-active' : ''">{{list.code}}</div>
                        <span class="ff-walk-class--nav-tip">{{list.title}}</span>
                    </el-popover>
                </li>
                <li class="ff-walk-my-reservation" @click="goJump">我的预定</li>
            </ul>
            <div class="ff-walk-class-go-top" @click="goTop">
                <i class="iconfont icon-fanhui-copy-copy-copy-copy"></i>
                <span>回顶部</span>
            </div>
        </div>
    </div>
</template>

<script>
    import List from '@/views/recommend/childrenRoute/addOrReplace'
    import moreScreen from '@/components/recommend/moreScreen.vue'
    import confirmDialog from '@/components/dialog/confirmDialog.vue'
    export default {
        name: 'walk',
        data() {
            return {
                lists: [],
                refresh: false,//等同于初始化数据
                navs: [],//右边悬浮导航
                activeCode: '',//当前高亮大类
                scrollHtml: '',//html节点
                loading: false,
                arr: [],//大类距离页面顶部的距离集合
                classList: [
                    {
                        label: '公司新品',
                        value: 'hot',
                    },
                    {
                        label: '预售商品',
                        value: 'new',
                    },
                    {
                        label: '网络爆款',
                        value: 'high',
                    }
                ],//款类别
                activeClass: 0,//高亮的款类别
                classListTip: '',//款类别提示
                walkOpenTip: {
                    title: '逛一逛小提示',
                    visible: false,//控制进入逛一逛页面弹框
                    content: ''
                },//逛一逛页面提示弹框
                selectionData: {},//筛选情况
            }
        },
        methods: {
            /**
             * 获取换款数据列表(业务组件,数据耦合性较强)
             * @param
             * CurrentPage: 当期页
             * PageSize: 个数
             * cb: 回调函数,用户返回处理后的数据和总数  (具体可以看子组件的detail数据)
             **/
            getWalkData (arr, total, sexBigClassCode, countObj) {
                return  (CurrentPage, PageSize, cb, Judge) => {
                    let param = {
                        pageNum: CurrentPage,
                        pageSize: PageSize,
                        strId: this.$store.state.userId,//门店ID
                        sexBigClassCode: sexBigClassCode,//单个搜索需要大类加编码
                        styType: this.classList[this.activeClass].value,//商品类型
                        styClrCodeList: [],
                        stySeasonCodeList: [],
                        stySizeCodeList: [],
                        styYearCodeList: [],
                        styPriceMin: 0,
                        styPriceMax: 9999
                    }
                    this.getData(CurrentPage, PageSize, cb, param, true, Judge, arr, total, countObj);
                }
            },
            /*筛选*/
            selection (data) {
                /*this.lists.forEach((obj) => {
                    obj.getWalkData = (CurrentPage, PageSize, cb, Judge) => {
                        let param = {
                            pageNum: CurrentPage,
                            pageSize: PageSize,
                            strId: this.$store.state.userId,//门店ID
                            styClrCodeList: data.sty_clr,
                            stySeasonCodeList: data.sty_season,
                            stySizeCodeList: data.sty_size,
                            styYearCodeList: data.sty_year,
                            styPriceMin: data.price[0] == null || data.price[0] === ''? 0 : data.price[0],
                            styPriceMax: data.price[1] == null || data.price[0] === ''? 9999 : data.price[1]
                        }
                        this.getData(CurrentPage, PageSize, cb, param, false, Judge, obj)
                    }
                    obj.refresh = true;
                })*/
                this.selectionData = data;
                this.getAllWalkData({
                    strId: this.$store.state.userId,//门店ID
                    styType: this.classList[this.activeClass].value,//商品类型
                    styClrCodeList: data.sty_clr,
                    stySeasonCodeList: data.sty_season,
                    stySizeCodeList: data.sty_size,
                    styYearCodeList: data.sty_year,
                    styPriceMin: data.price[0] == null || data.price[0] === ''? 0 : data.price[0],
                    styPriceMax: data.price[1] == null || data.price[0] === ''? 9999 : data.price[1]
                }, true);
            },
            /*获取数据*/
            getData (CurrentPage, PageSize, cb, param, calculate, Judge, arr, total, countObj) {
                if(Judge) return cb(arr, total, countObj);
                //一下是获取单一大类的数据
                this.$http({
                    url: '/api/SelPro/GetOrderList',
                    method: 'post',
                    data: param
                }).then(res => {
                    let data = res.data;
                    if(data.code === 1) {
                        let arr = data.data.map(obj => {
                            let imgList = obj.img? JSON.parse(obj.img) : [];
                            return Object.assign({
                                disabled: true,//是否禁用
                                ecode: obj.styCode,//款号
                                name: obj.styName,//款名称
                                imageUrl: imgList && imgList[0]&& imgList[0].URL || '',//商品主图
                                volume: obj.qtyRetail7d,//销量
                                weekAverage: obj.qtyAvg7d,//周日均
                                ranking: obj.itmSuggestReasonName,//排名
                                presentPrice: obj.stdPrice === obj.retailPrice || obj.retailPrice === 0? obj.stdPrice : obj.retailPrice,//最终显示价格
                                showFocus: false,//不显示收藏
                                showNewFocus: true,//显示新样式收藏
                                focus: obj.isAtten === 1? true : false,//是否已收藏
                                reservation: obj.isOrder === 1?true : false,//是否已预定
                                canOrder: obj.isCanOrder === 1? true : false,//是否可预定
                                isEvaluated: obj.isEvaluate === 1? true : false,//是否已评价
                                evaluationSum: obj.evaluateCnt,//评价总数
                                focusSum: obj.attention,//收藏数量
                                reservationSum: obj.orderStrCnt,//预定数量
                                checked: false,//是否选中
                                dateUpDaysLabel: obj.dateUpDaysName,//上市日期
                                /*inform: `${obj.lenName},${obj.slveLenName},${obj.dateUpDaysName}`,//衣长,袖长*/
                                imgList: imgList.map(img => {
                                    return {
                                        src: img.URL,
                                        active: false
                                    }
                                }),//小图集合
                            }, obj)
                        })
                        cb(arr, data.generalPageInfo?data.generalPageInfo.total : 0);
                    }else {
                        cb([], 0);
                    }
                }).catch(() => {
                    cb([], 0);
                })
            },
            /*回到顶部*/
            goTop () {
                let body = this.scrollHtml;
                body && (body.scrollTop = 0) && (body = null);
            },
            /*监听html滚动确定大类高亮*/
            classActive () {
                this.arr = Object.keys(this.$refs).map((obj) => {
                    let arr = this.$refs[obj];
                    //let height = arr[0].offsetHeight;
                    if(arr.length === 0)return false;
                    return {
                        offsetTop: arr[arr.length - 1].offsetTop/* + 0.1 * height*/,
                        offsetTopFirst: arr[0].offsetTop - 36,
                        code: obj
                    }
                }).filter(n => n);
                let top = this.scrollHtml.scrollTop;
                let obj = this.arr.find((obj, index) => {
                    if(index === 0) return obj.offsetTop > top;
                    return obj.offsetTopFirst > (top - 200);
                });
                obj && (this.activeCode = obj.code);
            },
            /*点击滚动*/
            scrollClass (list) {
                this.arr = Object.keys(this.$refs).map((obj) => {
                    let arr = this.$refs[obj];
                    //let height = arr[0].offsetHeight;
                    if(arr.length === 0) return false
                    return {
                        offsetTop: arr[arr.length - 1].offsetTop/* + 0.15 * height*/,
                        offsetTopFirst: arr[0].offsetTop - 36,
                        code: obj
                    }
                }).filter(n => n);
                let obj = this.arr.find(obj => obj.code === list.code);
                if(obj) {
                    const rate = 6;
                    let top = this.scrollHtml.scrollTop;
                    let animation = () => {
                        window.requestAnimationFrame(() => {
                            top += (obj.offsetTopFirst - top) / rate;
                            if(Math.abs(top - obj.offsetTopFirst) < 1){
                                this.scrollHtml.scrollTop = obj.offsetTopFirst;
                                return
                            }
                            this.scrollHtml.scrollTop = top;
                            animation();
                        })
                    }
                    animation();
                }
            },
            /*一次获取所有大类的数据*/
            getAllWalkData (obj, refresh) {
                !obj && (obj = {
                    strId: this.$store.state.userId,//门店ID
                    styType: this.classList[this.activeClass].value,//商品类型
                    styClrCodeList: [],
                    stySeasonCodeList: [],
                    stySizeCodeList: [],
                    styYearCodeList: [],
                    styPriceMin: 0,
                    styPriceMax: 9999
                })
                this.loading = true;
                this.$http({
                    url: '/api/SelPro/GetOrderListAll',
                    method: 'post',
                    data: obj
                }).then(res => {
                    let data = res.data;
                    this.loading = false;
                    if(data.code === 1) {
                        this.navs = data.data.bigClassList.map(obj => {
                            return {
                                code: obj.bigClassCode,
                                title: obj.bigClassName
                            }
                        })
                        let arr = [];
                        data.data.bigClassList.map(obj => {
                            let lists =  data.data.sexBigClassStyList.filter(n => n.sexBigClassCode.includes(obj.bigClassCode));
                            arr.push(...lists);
                        })
                        //获取数据并在方法中将值直接传递
                        this.lists = arr.map(data => {
                            let proLists = data.orderList.map(obj => {
                                let imgList = obj.img? JSON.parse(obj.img) : [];
                                return Object.assign({
                                    disabled: true,//是否禁用
                                    ecode: obj.styCode,//款号
                                    name: obj.styName,//款名称
                                    imageUrl: imgList && imgList[0]&& imgList[0].URL || '',//商品主图
                                    volume: obj.qtyRetail7d,//销量
                                    weekAverage: obj.qtyAvg7d,//周日均
                                    ranking: obj.itmSuggestReasonName,//排名
                                    presentPrice: obj.stdPrice === obj.retailPrice || obj.retailPrice === 0? obj.stdPrice : obj.retailPrice,//最终显示价格
                                    showFocus: false,//不显示收藏
                                    showNewFocus: true,//显示新样式收藏
                                    focus: obj.isAtten === 1? true : false,//是否已收藏
                                    reservation: obj.isOrder === 1? true : false,//是否已预定
                                    canOrder: obj.isCanOrder === 1? true : false,//是否可预定
                                    isEvaluated: obj.isEvaluate === 1? true : false,//是否已评价
                                    evaluationSum: obj.evaluateCnt,//评价总数
                                    focusSum: obj.attention,//收藏数量
                                    reservationSum: obj.orderStrCnt,//预定数量
                                    checked: false,//是否选中
                                    dateUpDaysLabel: obj.dateUpDaysName,//上市日期
                                    /*inform: `${obj.lenName},${obj.slveLenName},${obj.dateUpDaysName}`,//衣长,袖长*/
                                    imgList: imgList.map(img => {
                                        return {
                                            src: img.URL,
                                            active: false
                                        }
                                    }),//小图集合
                                }, obj)
                            })
                            return {
                                title: data.sexBigClassName,
                                sexBigClassCode: data.sexBigClassCode,
                                code: data.sexBigClassCode.slice(-1),
                                getWalkData: this.getWalkData(proLists, data.generalPageInfo && data.generalPageInfo.total || 0, data.sexBigClassCode, {
                                    reservationCount: data.canOrderCnt || 0,
                                    bookingCount: data.alreadyOrderCnt || 0
                                }),
                                refresh: false,
                                cb () {}
                            }
                        });
                        this.$nextTick(() => {
                            if(refresh) {
                                this.lists.forEach(obj => obj.refresh = true);
                            }
                        })
                    }else {
                        this.lists = [];
                        this.navs = [];
                    }
                    if(this.navs.length !== 0) {
                        this.$nextTick(() => {
                            this.classActive();
                        })
                    }
                }).catch(() => {
                    this.lists = [];
                    this.navs = [];
                    this.loading = false;
                })
            },
            /*跳转到我的预定*/
            goJump () {
                window.location.href = 'http://erp.fastfish.com/mall/PersonCenter/reservation?tab=first';
            },
            /*获取进入逛一逛页面的弹出小提示*/
            getTipsData () {
                this.$http({
                    url: '/api/SelPro/GetOrderNoticeOpen',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId
                    }
                }).then(res => {
                    let data = res.data;
                    if(!data.data) return;
                    if(data.code === 1){
                        let tip = data.data && data.data[0] || {};
                        this.walkOpenTip.title = tip.title;
                        console.log(tip.content.search(/\n/))
                        this.walkOpenTip.content = tip.content.replace(/\n/g, '<br />');
                        this.walkOpenTip.visible = true;
                    }
                })
            },
            /*获取逛一逛页面上方提示*/
            getTopTipsData () {
                this.$http({
                    url: '/api/SelPro/GetOrderNoticeTop',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId
                    }
                }).then(res => {
                    let data = res.data;
                    if(data.code === 1) {
                        let tip = data.data && data.data[0] || {};
                        this.classListTip = `${tip.title} : ${tip.content}`;
                    }
                })
            },
            /*改变款类*/
            changeActiveClass (index) {
                if(this.activeClass === index) return;
                this.activeClass = index;
                let data = this.selectionData;
                Object.keys(data).length === 0? this.getAllWalkData(false, true) : this.getAllWalkData({
                    strId: this.$store.state.userId,//门店ID
                    styType: this.classList[index].value,//商品类型
                    styClrCodeList: data.sty_clr,
                    stySeasonCodeList: data.sty_season,
                    stySizeCodeList: data.sty_size,
                    styYearCodeList: data.sty_year,
                    styPriceMin: data.price[0] == null || data.price[0] === ''? 0 : data.price[0],
                    styPriceMax: data.price[1] == null || data.price[0] === ''? 9999 : data.price[1]
                }, true);
            },
            /*下次不在提示*/
            walkOpenTipConfirm () {
                this.$http({
                    url: '/api/SelPro/UpdateOrderDonotNotice',
                    method: 'post',
                    data: {
                        strId: this.$store.state.userId
                    }
                })
            }
        },
        components: {
            List,
            moreScreen,
            confirmDialog
        },
        mounted () {
            this.scrollHtml = document.getElementsByTagName('html')[0];
            document.addEventListener('scroll', this.classActive);
            this.getTipsData();
            this.getTopTipsData();
            this.getAllWalkData();
        },
        activated () {
            this.scrollHtml.scrollTop = this.$route.meta.scrollTop;
        },
        deactivated () {
            document.removeEventListener('scroll', this.classActive);
        },
        beforeDestroy() {
            document.removeEventListener('scroll', this.classActive);
        },
        beforeRouteLeave (to, from, next) {
            from.meta.scrollTop = this.scrollHtml.scrollTop;
            next();
        }
    }
</script>

<style type="text/less" lang="less">
    .class-nav-style () {
        width: 36px;
        text-align: center;
        box-sizing: border-box;
        font-size: 12px;
        font-weight: 600;
    }
    .ff-walk-class--nav-tip {
        padding: 0 16px;
        font-weight: 400;
        font-size: 14px;
        line-height: 30px;
    }
    .ff-walk-open-tip {
        .ff-dialog-content-body {
            width: 550px;
        }
        .ff-dialog-content-html {
            width: 475px;
            text-align: left;
        }
        .ff-walk-open-tip-button {
            width: 108px;
            background-color: #fff;
            color: #fd6442;
        }
    }
    .ff-walk {
        width: 100%;
        margin-top: 5px;
        .ff-walk--style-list {
            color: #333;
            font-size: 16px;
            font-weight: 400;
            display: flex;
            line-height: 21px;
            padding: 10px 0 6px;
            border-bottom: 1px solid #DCDCDC;
            margin-bottom: 15px;
            ul {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            li {
                padding: 0 19px;
                cursor: pointer;
            }
            .ff-walk--style-list-active {
                color: #fd6442;
            }
            .ff-walk--style-top-tip {
                color: #fd6442;
                font-weight:400;
                flex: 1;
                text-align: right;
                padding-right: 4px;
                font-size: 12px;
            }
        }
        .ff-walk-class-box {
            border: 1px solid #eee;
            margin-bottom: 10px;
        }
        .ff-walk-class--nav {
            z-index: 4;
            position: fixed;
            left: 4%;
            top: 50%;
            transform: translateY(-48%);
            .ff-walk-class--nav-title {
                .class-nav-style ();
                color: #fff;
                background-color: #fd6442;
                line-height: 16px;
                padding: 2px 6px;
                margin-bottom: 10px;
                border-radius: 4px;
            }
            ul {
                border-radius: 4px;
                li {
                    background-color: #fff;
                    &:first-child {
                        border-radius: 4px;
                        .ff-walk-class--nav-label{
                            border-radius: 4px 4px 0 0;
                        }
                    }
                }
            }
            .ff-walk-class--nav-label, .ff-walk-my-reservation {
                .class-nav-style ();
                padding: 11px 6px;
                color: #666;
                font-weight: 400;
                margin-top: -1px;
                position: relative;
                border: 1px solid #ddd;
                cursor: default;
                background-color: #fff;
                outline: none;
                &:hover {
                    border: 1px solid rgba(253, 100, 66);
                    background-color: rgba(253, 100, 66, .1);
                    color: rgba(253, 100, 66);
                    z-index: 1;
                }
            }
            .ff-walk-class--nav-label {
                transition: all .4s ease;
            }
            .ff-walk-class--nav-active {
                border: 1px solid rgba(253, 100, 66);
                background-color: rgba(253, 100, 66, .1);
                color: rgba(253, 100, 66);
                z-index: 1;
            }
            .ff-walk-my-reservation {
                background-color: #eee;
                border-radius: 0 0 4px 4px;
                padding: 1px 0;
                cursor: pointer;
                line-height: 16px;
                &:hover {
                    background-color: rgba(253, 100, 66);
                    color: #fff;
                }
            }
            .ff-walk-class-go-top {
                .class-nav-style ();
                width: 38px;
                background-color: #eee;
                border-radius: 4px;
                margin-top: 30px;
                font-weight: 400;
                color: #666;
                padding: 9px 0;
                cursor: default;
                .iconfont {
                    font-size: 20px;
                }
                span {
                    margin-top: 4px;
                    display: block;
                }
                &:hover {
                    background-color: rgba(253, 100, 66);
                    color: #fff;
                }
            }
        }
        .ff-add-or-replace .ff-add-or-replace--ul {
            min-height: 350px;
        }
        .ff-cell .ff-text {
            padding-top: 0;
        }
        .ff-cell .ff-image-list {
            margin-bottom: 4px;
        }
        .ff-cell .ff-text .ff-commodity {
            margin-bottom: 5px;
        }
        .ff-add-or-replace .ff-add-or-replace--ul li {
            padding: 8px 0 4px;
        }
    }
</style>
